<template>
    <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item label='所属项目'>
                    <el-text>{{ isNullOrEmpty(formInline?.projectName) }}</el-text>
                </el-form-item>
            </re-col>
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item :label='titles?.aliasCode' prop="aliasCode">
                    <div class="w-full  grid grid-cols-4  gap-[16px] mt-[16px] leading-[1]">
                        <!-- <div v-for="(item, index) in formInline?.aliasList">
                            <div class="w-full h-full text-center bg-[var(--bg-4)] p-[16px] rounded-[8px] border-[1px] border-[rgba(0,0,0,0)] cursor-pointer"
                                :class="formInline.aliasCode == item?.aliasCode ? '!border-[var(--el-color-primary)]' : ''"
                                @click="checkedPackageInfo(item)">
                                <div>{{ isNullOrEmpty( item?.aliasCode ) }}</div>
                                <div>{{ isNullOrEmpty( item?.num ) }}条 </div>
                                <div>{{ isNullOrEmpty( item?.amount ) }}元 </div>
                            </div>
                        </div> -->
                        <template v-for="(item, index) in formInline?.aliasList" :key="index">
                            <div class="w-full h-[256px] py-[30px] bg-[#313753] rounded-[5px]">
                                <div class="text-[14px] text-center mb-[40px]">
                                    {{ isNullOrEmpty(item?.aliasCode) }}
                                </div>
                                <div class="flex tracking-[3px] justify-center mb-[20px] h-[24px]">
                                    <div class="text-[16px] flex flex-col justify-end leading-[1.2]">￥</div>
                                    <div class="text-[24px] font-[DIN-Medium] align-bottom">{{
                                        isNullOrEmpty(item?.amount) }}</div>
                                </div>
                                <div class="flex justify-center tracking-[2px] mb-[40px]">
                                    <div class="text-[18px] text-[#E77122] font-[DIN-Medium]">{{
                                        isNullOrEmpty(item?.num) }}</div>
                                    <div class="text-[14px] text-[#D6D6D6] flex flex-col justify-end leading-[1.2]">条
                                    </div>
                                </div>
                                <div class="px-[30px] relative">
                                    <div class="w-full h-[32px] rounded-[16px] border flex-c text-[#4583FF] text-[14px] cursor-pointer"
                                        @click="clickRecharge(item)">
                                        立即充值</div>
                                </div>
                            </div>
                        </template>
                    </div>
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";

const props = defineProps({
    formInline: {
        type: Object,
        default: () => ({})
    },
    isLoading: {
        type: Boolean,
        default: false
    }
})
const emits = defineEmits(['clickRecharge'])
const ruleFormRef = ref();
const titles = {
    aliasCode: '充值套餐'
}
const prompt = {
    aliasCode: `请选择${titles.aliasCode}`
}
const formRules = reactive(<FormRules>{
    aliasCode: [
        { required: true, message: prompt.aliasCode, trigger: 'blur' }
    ]
})
const checkedPackageInfo = (item) => {
    props.formInline.aliasCode = item?.aliasCode
}
const clickRecharge = (item) => {
    props.formInline.aliasCode = item?.aliasCode
    emits('clickRecharge', item)
}
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>